<!doctype html>
<html lang="en" class="dark font-sans antialiased">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/component.css" rel="stylesheet" />
    <script src="/component.js" defer></script>
  </head>
  <body class="mx-auto max-w-md p-6">
    <article class="relative overflow-hidden rounded-lg shadow-sm transition hover:shadow-lg">
      <img
        alt=""
        src="https://images.unsplash.com/photo-1661956602116-aa6865609028?auto=format&fit=crop&q=80&w=1160"
        class="absolute inset-0 h-full w-full object-cover"
      />

      <div class="relative bg-linear-to-t from-gray-900/50 to-gray-900/25 pt-32 sm:pt-48 lg:pt-64">
        <div class="p-4 sm:p-6">
          <time datetime="2022-10-10" class="block text-xs text-white/90"> 10th Oct 2022 </time>

          <a href="#">
            <h3 class="mt-0.5 text-lg text-white">How to position your furniture for positivity</h3>
          </a>

          <p class="mt-2 line-clamp-3 text-sm/relaxed text-white/95">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae dolores, possimus
            pariatur animi temporibus nesciunt praesentium dolore sed nulla ipsum eveniet corporis
            quidem, mollitia itaque minus soluta, voluptates neque explicabo tempora nisi culpa eius
            atque dignissimos. Molestias explicabo corporis voluptatem?
          </p>
        </div>
      </div>
    </article>
  </body>
</html>
